<template>
  <div class="tableBox">
    <Table :loading="loading" border :columns="columnsIn" :data="data" ref="table" class="mt10"></Table>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    data: {
      type: Array,
      required: true
      /**
       * 数据格式全部使用数组形式
       * className 为第一列。第一个置空，第二个起为班级名称
       * course1 为第二列 第一个数据为科目 ，第二个为老师姓名
       * course2 为第三列 第一个数据为科目 ，第二个为老师姓名
       * course3 ... 为其他列
       */
      /**
       * 数据格式全部使用数组形式
       * className 为第一列。第一个置空，第二个起为班级名称
       * course1 为第二列 第一个数据为科目 ，第二个为老师姓名
       * course2 为第三列 第一个数据为科目 ，第二个为老师姓名
       * course3 ... 为其他列
       */
      //   {
      //     className: [" ", "16级电商"],
      //     course1: ["图形图像处理（电商实训室）", "王蕊"],
      //     course2: ["网页制作（机房）", "张菁屏"]
      //     // course3: ['', ''],
      //     // course4: ['', ''],
      //   },
      //   {
      //     className: [" ", "16级会计"],
      //     course1: ["结算与汇兑", "刘怡临"]
      //     // course2: ['', ''],
      //     // course3: ['', ''],
      //     // course4: ['', ''],
      //   },
    },
    columnsOut: {
      type: Array,
      required: true
      //   未包装前的数据举例
      //   columns1: [
      //       {
      //         title: "2019/4/27",
      //         children: [
      //           {
      //             title: "8:30-9:30",
      //           },
      //           {
      //             title: "9:45-10:45",
      //           },
      //           {
      //             title: "11:00-12:00",
      //           },
      //           {
      //             title: "13:30-14:30",
      //           }
      //         ]
      //       }
      //     ]
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.creatColumns();
    },
    /*
     ** 使用传入的数据生成时间列标题
     */
    creatColumns() {
      let _this = this;
      this.columnsIn[1].title = this.columnsOut[0].title;
      let lenChildrenOut = this.columnsOut[0].children.length;
      let lenChildrenIn = this.columnsIn[1].children.length;
      if (lenChildrenIn - lenChildrenOut < 0) {
        new Error("内置列数不足，请手动添加列数");
        return;
      }
      this.columnsIn[1].children.splice(
        lenChildrenOut,
        lenChildrenIn - lenChildrenOut
      );
      // 遍历数据处理每个列时间标题
      this.columnsOut[0].children.forEach(function(item, index) {
          _this.$set(_this.columnsIn[1].children[index],'title',item.title)
      });
    }
  },
  data() {
    function addrows(h, htmlArr) {
      var rowsArr = [];
        for (let i = 0; i < htmlArr.length; i++) {
          if (i !== htmlArr.length - 1) {
            rowsArr.push(
              h(
                "div",
                {
                  attrs: {
                    class: "rowspan__child rowspan__child--border"
                  }
                },
                htmlArr[i]
              )
            );
          } else {
            rowsArr.push(
              h(
                "div",
                {
                  attrs: {
                    class: "rowspan__child"
                  }
                },
                htmlArr[i]
              )
            );
          }
        }

      return h(
        "div",
        {
          attrs: {
            class: "rowspan__parent"
          }
        },
        rowsArr
      );
    }
    return {
      /*
       ** 列标题,默认children预留10列，假如数据是4列，自动摘除后面的6列，保留前面的4列
       */
      columnsIn: [
        {
          title: " ",
          key: "className",
          align: "center",
          width: 160,
          className: "className",
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        },
        {
          title: "2019/4/20",
          key: "course",
          align: "center",
          children: [
            {
              title: "00:00-00:00",
              key: "course1",
              align: "center",
              render: (h, params) => {
                var htmlArr = params.row[params.column.key];
                return addrows(h, htmlArr);
              }
            },
            {
              title: "00:00-00:00",
              key: "course2",
              align: "center",
              render: (h, params) => {
                var htmlArr = params.row[params.column.key];
                return addrows(h, htmlArr);
              }
            },
            {
              title: "00:00-00:00",
              key: "course3",
              align: "center",
              render: (h, params) => {
                var htmlArr = params.row[params.column.key];
                return addrows(h, htmlArr);
              }
            },
            {
              title: "00:00-00:00",
              key: "course4",
              align: "center",
              render: (h, params) => {
                var htmlArr = params.row[params.column.key];
                return addrows(h, htmlArr);
              }
            },
            {
              title: "00:00-00:00",
              key: "course5",
              align: "center",
              render: (h, params) => {
                var htmlArr = params.row[params.column.key];
                return addrows(h, htmlArr);
              }
            },
            {
              title: "00:00-00:00",
              key: "course6",
              align: "center",
              render: (h, params) => {
                var htmlArr = params.row[params.column.key];
                return addrows(h, htmlArr);
              }
            },
            {
              title: "00:00-00:00",
              key: "course7",
              align: "center",
              render: (h, params) => {
                var htmlArr = params.row[params.column.key];
                return addrows(h, htmlArr);
              }
            },
            {
              title: "00:00-00:00",
              key: "course8",
              align: "center",
              render: (h, params) => {
                var htmlArr = params.row[params.column.key];
                return addrows(h, htmlArr);
              }
            },
            {
              title: "00:00-00:00",
              key: "course9",
              align: "center",
              render: (h, params) => {
                var htmlArr = params.row[params.column.key];
                return addrows(h, htmlArr);
              }
            },
            {
              title: "00:00-00:00",
              key: "course10",
              align: "center",
              render: (h, params) => {
                var htmlArr = params.row[params.column.key];
                return addrows(h, htmlArr);
              }
            }
          ]
        }
      ]
    };
  }
};
</script>

<style lang="less">
.tableBox {
  margin-top: -10px;
}
@fontSize: 12px;
.rowspan__parent {
  margin: 0 -20px;
}

.rowspan__child {
  font-size: @fontSize;
  padding: 5px 10px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rowspan__child:nth-child(1) {
  color: #f00;
  font-weight: bold;
  font-size: @fontSize;
}
.className .rowspan__child:nth-child(1) {
  color: #333;
}
.ivu-table-border td,
.ivu-table-border th {
  border-color: #e8eaec;
  border-style: solid;
  border-width: 0 0 1px 1px;
}
.rowspan__child--border {
  font-size: @fontSize;
  border-color: #e8eaec;
  border-style: solid;
  border-width: 0 0 1px 0;
  width: 100%;
}
</style>
